<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-button class="filter-item" type="primary" v-waves icon="el-icon-edit" @click="handleAdd">添加</el-button>
			<el-input class="filter-item" @keyup.enter.native="handleFilter" style="width: 200px;" placeholder="请输入关键词" v-model="search.keyword"></el-input>
			<div class="filter-item">
				<span class="txt">到期时间</span>
				<el-date-picker style="width: 240px;" value-format="timestamp" v-model="search.date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</div>
			<div class="filter-item">
				<el-select v-model="search.auditMode" placeholder="审核模式" style="width:150px">
					<el-option v-for="item in [{value: -1,label: '全部'}, {value: 0, label: '运营模式'}, {value: 1,label: '审核模式'}]" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<el-button class="filter-item" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
		</div>
		<el-table v-loading="!pload" @selection-change="selectionChange" ref="multipleTable" border :data="tableData">
			<el-table-column label="序号" align="center" show-overflow-tooltip width="55">
				<template slot-scope="scope">
					{{scope.$index * currentPage + 1}}
				</template>
			</el-table-column>
			<el-table-column property="siteId" label="站点Id" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column property="appletId" label="小程序Id" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column property="appletName" label="小程序名称" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column property="account" label="小程序账号" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="创建时间" align="center" width="180" show-overflow-tooltip>
				<template slot-scope="scope">
					{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
				</template>
			</el-table-column>
			<el-table-column label="到期时间" align="center" width="180" show-overflow-tooltip>
				<template slot-scope="scope">
					{{scope.row.expirationTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
				</template>
			</el-table-column>
			<el-table-column label="审核模式" align="center" width="100">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.auditMode" type="danger" size="mini">过审</el-tag>
					<el-tag v-else type="success" size="mini">运营</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center" width="100">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.status" type="danger" size="mini">停用</el-tag>
					<el-tag v-else type="success" size="mini">启用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150" align="center">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="limit" :page-sizes="limits" background layout="sizes, prev, pager, next, jumper, total" :total="count">
			</el-pagination>
		</div>
		<edit v-if="edit" :id="selectTable.appletId" @getData="getData"></edit>
	</div>
</template>

<script>
import { wechatList } from '@/utils/weApi'
import waves from '@/directive/waves' // 水波纹指令
import edit from './edit'
export default {
  directives: {
    waves
  },
  data() {
    return {
      tableData: [],
      search: {
        keyword: ''
      },
      selection: [],
      selectTable: {},
      pload: false,
      edit: false,
      currentPage: 1,
      limit: 20,
      limits: [10, 20, 50, 100],
      count: 0
    }
  },
  components: {
    edit
  },
  created() {
    this.getData()
  },
  methods: {
    selectionChange(selection) {
      this.selection = selection
    },
    toggleSelection(s) {
      if (!s) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleAdd() {
      this.selectTable.appletId = 0
      this.selectTable.method = 'add'
      this.edit = true
    },
    handleEdit(index, row) {
      this.selectTable = row
      this.selectTable.method = 'edit'
      this.edit = true
    },
    // async handleDelete(index, row) {
    //   this.$confirm('确认要删除吗', {
    //     type: 'warning'
    //   }).then(async() => {
    //     try {
    //       this.pload = false
    //       await artRemove({
    //         uids: row.authUser.userId
    //       })
    //       this.$notify({
    //         title: '删除成功',
    //         type: 'success',
    //         duration: 5000
    //       })
    //       this.getData()
    //     } catch (e) {
    //       this.pload = true
    //     }
    //   })
    // },
    // toggleDel() {
    //   this.$confirm('确认要删除吗', {
    //     type: 'warning'
    //   }).then(async() => {
    //     const ids = this.selection.map((i, index) => {
    //       return i.authUser.userId
    //     }).join(',')
    //     try {
    //       this.pload = false
    //       await artRemove({
    //         uids: ids
    //       })
    //       this.$notify({
    //         title: '删除成功',
    //         type: 'success',
    //         duration: 5000
    //       })
    //       this.getData()
    //     } catch (e) {
    //       this.pload = true
    //     }
    //   })
    // },
    async getData() {
      if (this.search.date) {
        this.search.expirationTimeStart = this.search.date[0]
        this.search.expirationTimeEnd = this.search.date[1]
      }
      const data = this.JSONo({
        pageNum: this.currentPage,
        pageSize: this.limit
      },
      this.search
      )
      this.pload = false
      const Datas = await wechatList(data)
      this.tableData = Datas.data
      this.count = Datas.pageInfo.total
      this.pload = true
    },
    handleFilter() {
      this.currentPage = 0
      this.getData()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.limit = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    }
  }
}
</script>
